<template>
  <div class="relative">
    <div id="container" />
    <div class="absolute">
      <el-tag>IMEI:{{info['imei']}}</el-tag>
      <el-tag type="success">设备电量:{{power(info['v'])}}</el-tag>
      <el-tag type="warning">坐标:{{info['gps']}}</el-tag>
    </div>
  </div>
</template>
<script>
  import {
    wgs84togcj02
  } from '@/utils/gnss'
  import AMapLoader from '@amap/amap-jsapi-loader'
  export default {
    name: 'Map',
    data() {
      return {
        lng: null,
        lat: null,
        info: []
      }
    },
    // "{"locate":"104.069369,30.573504"}"
    created() {
      this.mapInit()
    },
    methods: {
      mapInit() {
        const cj02 = wgs84togcj02(this.$route.query.lng, this.$route.query.lat)
        this.lng = cj02[0].toFixed(8)
        this.lat = cj02[1].toFixed(8)
        this.info = this.$route.query.gpsinfo
        window._AMapSecurityConfig = {
          securityJsCode: '920cf4e1ad0e268496b3665ed6c98037' // 秘钥
        }
        // 初始化地图对象，加载地图
        AMapLoader.load({
          'key': '0a76308662b522140d6bcf42100ebf3f', // 申请好的Web端开发者Key，首次调用 load 时必填
          'version': '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          'plugins': ['AMap.CitySearch', 'AMap.DistrictSearch', 'AMap.Marker', 'AMap.LngLat', 'AMap.Icon',
            'AMap.Size'
          ] // 插件列表
        }).then((AMap) => {
          // 创建地图实例
          var map = new AMap.Map('container', {
            mapStyle: "amap://styles/abe1a84c9a490c5fb55c55482806afab",
            viewMode: '3D', // 是否为3D地图模式
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 18, // 初始化地图级别
            center: [this.lng, this.lat]
          })
          // 创建自定义Marker内容
          const markerContent = '' +
            '<div>' +
            '   <img src="/locate.gif" style="width:48px;height:48px">' +
            '</div>'
          // 创建Marker对象
          const marker = new AMap.Marker({
            position: [this.lng, this.lat],
            content: markerContent, // 将 html 传给 content
            offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
          })
          // 设置鼠标划过点标记显示的文字提示
          marker.setTitle('电量：' + this.power(this.info['v']) + '，更新时间：' + this.$route.query.itime.length == 10 ?
            this.timestampToTime(this.$route.query.itime) : this.$route.query.itime.length)
          map.add(marker)
        }).catch(e => {
          this.$message.error('map初始失败:' + e)
          // console.log(e);
        })
      },
      power(v) {
        const p = (v * 1 - 800) / 240 * 100
        if (p <= 0) {
          return 0 + '%'
        } else if (p >= 100) {
          return 100 + '%'
        } else {
          return p.toFixed(1) + '%'
        }
      },
      timestampToTime(timestamp) {
        timestamp = timestamp || null
        const date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-'
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s
      }
    }
  }
</script>
<style lang="scss" scoped>
  #container {
    width: 100%;
    height: calc(100vh - 50px);
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
    bottom: 10px;
    right: calc(50% - 225px);
    width: 450px;
    height: 50px;
    border-radius: 10px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    background-color: #fafafa;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 1px 1px 1px 1px rgba(181, 181, 181, 0.7);
  }
</style>
